<template>
	<view>
		<custom-header title="商品售后" />
		<view class="_wrap">
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.id?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			<view class="type_wrap" v-if="tab == 2">
				<view 
					class="list" 
					:class="type == item.id?'active':''" 
					v-for="(item,index) in typeList" 
					:key="index"
					@click="handleSelectType(item)">
					{{ item.name }}
				</view>
				<view
					class="list" 
					:class="isShowScreen?'active':''" 
					@click="handleShowScreen()">
						<view class="icon">
							<image src="/static/common/screen2.png" mode="" v-if="isShowScreen"></image>
							<image src="/static/common/screen1.png" mode="" v-else></image>
						</view>
						<view class="text">筛选</view>
				</view>
			</view>
			<!-- 订单筛选 -->
			<view class="screen_wrap" v-if="tab == 2 && isShowScreen">
				<view class="title">订单筛选</view>
				<view class="input">
					<input type="text" v-model="screen.orderNum" placeholder="按售后编号搜索">
				</view>
				<view 
					class="select_time"
					:class="{'isHave':screen.startTime}" 
					@click="isShowSelectTime = true">
					<view class="start">
						<view class="icon">
							<image src="/static/common/date_icon.png" mode=""></image>
						</view>
						<view class="date">{{screen.startTime || '开始日期'}}</view>
						<view class="right_icon">
							<image src="/static/common/bottom2.png" mode=""></image>
						</view>
					</view>
					<view class="border"></view>
					<view class="end">
						<view class="icon">
							<image src="/static/common/date_icon.png" mode=""></image>
						</view>
						<view class="date">{{screen.endTime || '结束日期'}}</view>
						<view class="right_icon">
							<image src="/static/common/bottom2.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="btn_wrap">
					<view 
						class="btn"
						hover-class="custom_hover"
						:hover-stay-time="200" 
						@click="handleReset">重置</view>
					<view 
						class="btn confirm"
						hover-class="confirm_hover"
						:hover-stay-time="200"
						:class="{'btn_disable':!screen.startTime&&!screen.orderNum}"
						@click="handleSearch">查询</view>
				</view>
				<view class="close" @click="isShowScreen = false">
					<image src="/static/common/close1.png" mode=""></image>
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 120rpx - '+(tab == 2?'72rpx':'0rpx')+' - '+(tab == 2 && isShowScreen?'440rpx':'0rpx')+' - 5rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap">
					<view
						class="no_data" 
						v-if="!listData.length && listLoading != 'loading'">
							<view class="icon">
								<image src="/static/common/nodata2.png" mode=""></image>
							</view>
					</view>
					<view class="list_wrap" v-if="listData.length">
						<view class="list" v-for="(item,index) in listData" :key="index">
							<view class="orderNum_createTime">
								<view class="orderNum">售后单号：{{ item.ordeNumber }}</view>
								<view class="createTime">{{ item.createTime }}</view>
							</view>
							<view class="img_info">
								<view class="img">
									<image :src="item.imgUrl" mode=""></image>
								</view>
								<view class="info">
									<view class="name_grade_status">
										<view class="name_grade">
											<text class="name">{{ item.name }}</text>
											<text class="grade"> {{ item.grade }} </text>
										</view>
										<!-- 售后中 -->
										<view 
											class="status orange" 
											v-if="tab == 1" 
											hover-class="custom_hover"
											:hover-stay-time="200"
											@click="handleDetail(item)">
											<view class="text">售后中</view>
											<view class="right_icon">
												<image src="/static/common/right2.png" mode=""></image>
											</view>
										</view>
										<!-- 售后完成 -->
										<view 
											class="status green" 
											v-if="tab == 2" 
											hover-class="custom_hover"
											:hover-stay-time="200"
											@click="handleDetail(item)">
											<view class="text">
												<text v-if="item.compensate == 1">平台赔付</text>
												<text v-if="item.compensate == 2">商家赔付</text>
												<text v-if="item.compensate == 3">共同赔付</text>
											</view>
											<view class="right_icon">
												<image src="/static/common/right3.png" mode=""></image>
											</view>
										</view>
									</view>
									<view class="size">
										规格：{{ item.size }}
									</view>
									<view class="mature_price">
										<view class="mature">
											成熟度：{{ item.mature }}
										</view>
										<view class="price">
											￥{{ item.price }}x1扎
										</view>
									</view>
								</view>
							</view>
							<!-- 售后完成 赔付信息 -->
							<view class="compensate_wrap" v-if="tab == 2">
								<view class="cw">
									<view class="cw_info">
										平台赔付：<text class="price">6.75元</text>
									</view>
									<view class="cw_info">
										商家赔付：<text class="price">6.75元</text>
									</view>
								</view>
								<view class="cw">
									<view class="cw_info">
										理赔数量：0扎
									</view>
									<view class="cw_info">
										平台回复：无
									</view>
								</view>
							</view>
							<!-- 售后拒绝 -->
							<view class="refuse_wrap" v-if="tab == 3">
								<view class="rw">
									问题类型：<text class="value">其他问题</text>
								</view>
								<view class="rw">
									问题描述：<text class="value">花价太贵</text>
								</view>
								<view class="image_list_wrap">
									<view 
										class="image_list" 
										v-for="(img,img_index) in item.imageList" 
										:key="img_index"
										@click="handlePreviewImage(index,img_index)">
											<up-image :show-loading="true" :src="img.url" width="100%" height="100%"></up-image>
									</view>
								</view>
								<view class="video_wrap"></view>
							</view>
						</view>
					</view>
					<!-- 加载中 -->
					<view class="loading_wrap" v-if="listLoading == 'loading'">
						<up-loadmore
							:status="listLoading"
							iconSize="22"
							iconColor="#FF3316"
							loadingIcon='semicircle'
							loadingText=""
							/>
					</view>
			</scroll-view>
		</view>
		<!-- 有效期 选择日期 -->
		<up-calendar 
			:show="isShowSelectTime" 
			@close="isShowSelectTime = false"
			mode="range" 
			@confirm="handleConfirmSelectTime"
			color="#F5564D"></up-calendar>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	
	const tab = ref(1)
	const tabsList = ref([
		{ id:1,name:'售后中' },
		{ id:2,name:'售后完成' },
		{ id:3,name:'售后拒绝' }
	])
	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.id
		loadGetListData()
	}
	
	// 消息弹出层
	const isShowToast = ref(false)
	const popupConfig = ref({})
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listLoading.value = 'loadmore'
			listData.value = [
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:1, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50',
					imageList:[
						{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
						{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
						{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
						{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
					]
				},
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:2, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50'
				},
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:3, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50'
				},
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:3, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50'
				},
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:3, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50'
				},
				{
					id:1, 
					ordeNumber:'1564651',
					createTime:'2025-6-17 21:00:15',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					size:'20支/扎',
					status:1, // 1售后中
					compensate:3, // 1平台赔付 2商家赔付 3共同赔付
					imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
					price:'15.50'
				}
			]
		},1000);
	};
	
	// 选择类型
	const type = ref(1)
	const typeList = ref([
		{ id:1,name:'全部理赔' },
		{ id:2,name:'平台理赔' },
		{ id:3,name:'商家理赔' }
	])
	const handleSelectType = (item)=>{
		type.value = item.id
		loadGetListData()
	}
	// 筛选
	const screen = ref({})
	const isShowScreen = ref(false)
	const handleShowScreen = ()=>{
		isShowScreen.value = !isShowScreen.value
	}
	
	// 时间选择
	const isShowSelectTime = ref(false)
	const handleConfirmSelectTime = (e)=>{
		screen.value.startTime = e[0]
		screen.value.endTime = e[e.length - 1]
		isShowSelectTime.value = false
	}
	// 重置
	const handleReset = ()=>{
		screen.value = {}
		loadGetListData()
	}
	// 查询
	const handleSearch = ()=>{
		const { startTime,orderNum } = screen.value;
		if(!startTime&&!orderNum)return;
		loadGetListData()
	}
	
	// 预览图片
	const handlePreviewImage = (index,img_index)=>{
		uni.previewImage({
			current:img_index,
			urls:listData.value[index].imageList.map(item=>item.url)
		})
	}
	// 预览视频
	const handlePreviewVideo = (index)=>{
		// #ifdef MP-WEIXIN
		wx.previewMedia({
			current:index,
			sources:fileList.value
		})
		// #endif
	}
	
	// 查看详情
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/afterSaleDetail/afterSaleDetail?id='+item.id
		})
	}
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
._wrap{
	padding: 0 20rpx;
}
.scroll_content_wrap{
	margin-top: 20rpx;
}
.tabs_wrap{
	display: flex;
	height: 82rpx;
	.list{
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 32rpx;
		position: relative;
		&.active{
			color: #333333;
			font-weight: bold;
			&::after{
				content: '';
				width: 28rpx;
				height: 8rpx;
				background: #FF3316;
				border-radius: 8rpx;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				margin-left: -14rpx;
			}
		}
	}
}
.type_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20rpx;
	.list{
		width: 160rpx;
		text-align: center;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 126rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #666666;
		border: 1rpx solid #FFFFFF;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active{
			background: #FCEEF0;
			border: 1rpx solid #FF3316;
			color: #FF3316;
		}
		.icon{
			width: 28rpx;
			height: 27rpx;
			display: flex;
			margin-right: 10rpx;
		}
	}
}
.screen_wrap{
	height: 420rpx;
	padding: 0 40rpx;
	border-radius: 20rpx;
	background: #FFFFFF;
	margin-top: 20rpx;
	position: relative;
	.title{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
		padding-top: 30rpx;
	}
	.input{
		padding-top: 40rpx;
		input{
			max-width: 100%;
			height: 60rpx;
			border-radius:60rpx;
			background: #F6F7F8;
			font-size: 24rpx;
			padding: 0 25rpx;
		}
	}
	.select_time{
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		font-size: 24rpx;
		.start,.end{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 240rpx;
			height: 60rpx;
			border-radius: 216rpx;
			background: #F6F7F8;
			.icon{
				width: 28rpx;
				height: 27rpx;
				display: flex;
			}
			.date{
				padding: 0 10rpx;
			}
			.right_icon{
				height: 10rpx;
				width: 20rpx;
				display: flex;
			}
		}
		.border{
			width: 60rpx;
			height: 2rpx;
			background: #999999;
		}
		&.isHave{
			color: #666;
		}
	}
	.btn_wrap{
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn{
			width: 192rpx;
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 120rpx;
			background: #FFF0F0;
			color: #FE4C20;
			font-size: 32rpx;
		}
		.confirm{
			background: #F5564D;
			color: #fff
		}
	}
	.close{
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 25rpx;
		top: 30rpx;
	}
}
.no_data{
	background: #fff;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100% - 40rpx);
	.icon{
		width: 280rpx;
		height: 322rpx;
	}
}
.list_wrap{
	// padding: 20rpx 0;
	.list{
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 25rpx 20rpx;
		margin-bottom: 20rpx;
		.orderNum_createTime{
			display: flex;
			font-size: 24rpx;
			color: #999999;
			justify-content: space-between;
			border-bottom: 1rpx solid #E5E5E5;
			padding-bottom: 25rpx;
		}
		.img_info{
			display: flex;
			align-items: center;
			padding-top: 25rpx;
			.img{
				width:143rpx;
				height: 143rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			.info{
				padding-left: 20rpx;
				flex: 1;
				.name_grade_status{
					display: flex;
					justify-content: space-between;
					font-weight: bold;
					font-size: 28rpx;
					.name{
						color: #333333;
					}
					.grade{
						color: #FF3316;
					}
					.status{
						display: flex;
						align-items: center;
						.right_icon{
							width: 11rpx;
							height: 20rpx;
							display: flex;
							margin-left: 10rpx;
						}
					}
				}
				.size{
					font-size: 24rpx;
					color: #999;
					padding: 15rpx 0;
				}
				.mature_price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999999;
					.price{
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}
		.compensate_wrap{
			margin-top: 25rpx;
			border-top: 1rpx solid #E5E5E5;
			.cw{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 25rpx;
				font-size: 24rpx;
				color: #999;
				text.price{
					font-weight: bold;
					color: #C60C0C;
				}
			}
		}
		.refuse_wrap{
			margin-top: 25rpx;
			border-top: 1rpx solid #E5E5E5;
			.rw{
				padding-top: 25rpx;
				font-size: 24rpx;
				color: #999;
				text.value{
					color: #333;
				}
			}
			.image_list_wrap{
				display: flex;
				flex-wrap: wrap;
				.image_list{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-top: 25rpx;
					margin-left: 25rpx;
					&:first-child{
						margin-left: 0;
					}
					&:nth-child(3n+4){
						margin-left: 0;
					}
				}
			}
		}
	}
}
</style>
